<template>
  <!-- <div v-show="show" class="games" ref="game">
        </div>  -->
  <canvas class="games" ref="game" width="" height="">
      </canvas>
</template>

<script>
  // 游戏组件
  import Game from '../game'
  export default {
    name: 'game',
    props: {
      option: { //配置
        type: Object,
        default: function() {
          return {}
        }
      },
      show: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        name: 'game',
        myGameEle: null,
      }
    },
    watch: { //嵌套过深的对象无法监听除非深度监听 耗性能不推荐 不知是否是存在数组的问题 最好发新的整个对象过来
      option: function(value) {
        //监听option配置
      },
      show: function(val) {
        // console.log(val)
        //显示时重置大小免得大小有问题
      }
    },
    methods: {
      gamereload: function(option) {
        //重新加载
      }
    },
    // computed:{
    //     gameoption:function(){
    //     }
    // },
    mounted() {
      //组件挂载后
      this.myGameEle = this.$refs.game
      this.myGameEle.setAttribute("width", window.innerWidth)
      this.myGameEle.setAttribute("height", window.innerHeight)
      window.addEventListener('resize', () => {
        //窗口调整大小
        this.myGameEle.setAttribute("width", window.innerWidth)
        this.myGameEle.setAttribute("height", window.innerHeight)
      })
      let myGame = new Game(this.myGameEle)
      myGame.createScene()
      myGame.doRender()
    },
    updated() {
      //数据更新后
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .games {
    display: block;
  }
</style>
